<!-- 字典数据 -->
<template>
  <div>
    <!-- 筛选条件 -->
    <comSearchForm :form-item="formItem" :form-data="formData" @searchForm="searchFn" @clearForm="clearForm">
      <template slot-scope="scope">
        <el-button size="small" icon="el-icon-circle-plus-outline" type="primary" @click="addButton">新增</el-button>
      </template>
    </comSearchForm>
    <!-- 表格部分 -->
    <comTable ref='tableRef' :loading="tableLoading" :data="tableData" :tableHeader="tableHeader"
      @selection-change='handleSelectionClick' :pageObj="pageObj" @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="modifyClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </comTable>
    <!-- 弹窗 -->
    <comDialog :visible.sync="dialogVisible" :title="dialogTitle" :width="width" :before-close="beforeCloseHandler"
      :close-on-click-modal="false" :center="false" :showFooter="true" custom-class="custom-dialog" :show-footer="false"
      @confirm="handleConfirm" @cancel="handleCancel" :confirm-loading="confirmLoading">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <el-form-item label="字典类型" prop="dictionaryType">
            <el-input v-model="ruleForm.dictionaryType" disabled placeholder="请输入字典类型"></el-input>
          </el-form-item>
          <el-form-item label="数据标签" prop="dataTag">
            <el-input v-model="ruleForm.dataTag" placeholder="请输入字典名称"></el-input>
          </el-form-item>
          <el-form-item label="数据键值" prop="dataKeyValue">
            <el-input v-model="ruleForm.dataKeyValue" placeholder="请输入字典类型"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input type="textarea" v-model="ruleForm.remarks" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </comDialog>
  </div>
</template>

<script>
import comSearchForm from '@/components/CommonSearchForm'
import comTable from '@/components/commonTable';
import comDialog from '@/components/commonDialog';
export default {
  name: 'dictionaryData',
  components: {
    comSearchForm,
    comTable,
    comDialog
  },
  data() {
    return {
      // 表单部分
      formData: {
        dictionaryName: this.$route.query.dictionaryName,
        dictionaryType: this.$route.query.dictionaryType,
        dictionaryLabel: ''
      },
      optionsList: [
        {
          label: '一年级',
          value: '1'
        },
        {
          label: '二年级',
          value: '2'
        },
        {
          label: '三年级',
          value: '3'
        },
        {
          label: '四年级',
          value: '4'
        },
        {
          label: '五年级',
          value: '5'
        },
        {
          label: '六年级',
          value: '6'
        }
      ],
      formItem: [
        {
          label: '字典名称',
          value: 'dictionaryName',
          disabled: true,
          width: 6,
          type: 'input',
          placeholder: '请输入字典名称'
        },
        {
          label: '字典类型',
          value: 'dictionaryType',
          disabled: true,
          width: 6,
          type: 'input',
          placeholder: '请输入字典类型'
        },
        {
          label: '字典标签',
          value: 'dictionaryLabel',
          width: 6,
          type: 'input',
          placeholder: '请输入字典标签'
        },
      ],
      // 表格部分
      tableLoading: false,
      tableHeader: [
        {
          prop: 'dataTag',       //字段
          title: '数据标签',       //表头
        },
        {
          prop: 'dataKeyValue',
          title: '数据键值',
        },
        {
          prop: 'remarks',
          title: '备注',
        },
        {
          prop: 'creationTime',
          title: '创建时间'
        },
      ],
      tableData: [{
        creationTime: '2024-05-10',
        dataTag: '男生',
        dataKeyValue: '0',
        remarks: '性别男'
      }, {
        creationTime: '2024-05-20',
        dataTag: '女生',
        dataKeyValue: '1',
        remarks: '性别女'
      }, {
        creationTime: '2024-05-25',
        dataTag: '未知',
        dataKeyValue: '2',
        remarks: '性别未知'
      }],
      //分页对象
      pageObj: {
        pagingOrNot: true,
        position: "right",
        sizes: [10, 15, 20, 30, 50],
        total: 100,
        pageData: {
          page: 1,
          size: 10
        }
      },
      // 弹窗部分
      dialogTitle: '',
      confirmLoading: false,
      dialogVisible: false,
      width: "800px",
      ruleForm: {
        dictionaryType: this.$route.params.dictionaryType || '',
        dataTag: '',
        dataKeyValue: '',
        remarks: '',
      },
      rules: {
        dataTag: [
          { required: true, message: '请输入数据标签', trigger: 'blur' },
        ],
        dataKeyValue: [
          { required: true, message: '请输入数据键值', trigger: 'blur' },
        ],
      }
    };
  },

  mounted() {
    // console.log(this.$route.params);
  },

  methods: {
    // 表单部分
    searchFn(obj) {
      console.log('查询数据', obj)
      this.formData = obj
    },

    clearForm(obj) {
      console.log('清除数据', obj)
      this.formData = obj
    },

    addButton() {
      console.log('[ 新增 ]')
      this.dialogTitle = '新增字典数据'
      this.dialogVisible = true;
      this.resetTheForm()
    },

    // 表格部分
    onClick(row) {
      console.log('插槽点击---->', row);
    },
    handleSelectionClick(selection) {
      console.log('勾选-->', selection);
    },
    modifyClick(item) {
      console.log('[ 修改 ]', item)
      this.dialogTitle = '修改字典类型'
      this.dialogVisible = true;
      this.ruleForm.dataTag = item.dataTag
      this.ruleForm.dataKeyValue = item.dataKeyValue
      this.ruleForm.remarks = item.remarks
    },
    deleteClick(item) {
      console.log('[ 删除 ]', item)
    },
    //页码变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //条数变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    // 弹窗部分
    beforeCloseHandler(done) {
      this.resetTheForm()
      done();
      console.log('[ 点击右上角关闭按钮 ]', this.ruleForm)
    },
    handleConfirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          this.$message.success("点击了确定按钮");
          setTimeout(() => {
            this.confirmLoading = false;
          }, 1000);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleCancel() {
      this.resetTheForm()
      console.log('[ 点击了取消按钮 ]', this.ruleForm)
    },
    // 重置表单
    resetTheForm() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
        this.ruleForm.dictionaryType = this.$route.params.dictionaryType || ''
        this.ruleForm.dataTag = ''
        this.ruleForm.dataKeyValue = ''
        this.ruleForm.remarks = ''
        console.log('[ this.ruleForm ]', this.ruleForm)
      })
    },
  },
};
</script>